<template>
  <el-menu
      :default-active="$route.path"
      class="el-menu-vertical"
      :collapse="isCollapse"
      style="height: 100%"
      @open="handleOpen"
      text-color="#8A979Eee"
      router
      @close="handleClose"
  >
    <el-menu-item-group index="" class="brand primaryColor">
      <template #title>
        <img src="https://img2.baidu.com/it/u=2128222776,2799476436&fm=26&fmt=auto&gp=0.jpg"
             style="width: 42px;height: 42px;float: left;margin-left: -10px"/>
        <div class="left_text">
          {{title}}
        </div>
      </template>
    </el-menu-item-group>
    <div v-for="(item, index) in funcList">
      <el-submenu
          v-if="item.children"
          :key="item.path + index"
          :index="item.path"
      >
        <template #title>
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item
            v-for="(p, i) in item.children"
            :key="p.path + i"
            :index="p.path"
        >
          <template #title>
            <i :class="p.icon"></i>
            {{ p.title }}
          </template
          >
        </el-menu-item>
      </el-submenu>
      <el-menu-item
          :key="item.path + index"
          :index="item.path"
          v-else
      >
        <template #title>
          <i :class="item.icon"></i>
          {{ item.title }}
        </template
        >
      </el-menu-item>
    </div>

  </el-menu>
</template>

<script>
export default {
  name: "aside-bar",
  props: {
    isCollapse: {
      type: Boolean,
      default: false,
    },
    funcList: {
      type: Array,
      default: []
    },
    title:{
      type: String,
      default:"门禁系统"
    }
  },
  data() {
    return {
      loading: false, //是显示加载
      identity: 99999,
      // Func: this.getFunction()
    };
  },
  methods: {
    handleOpen(item, keyPath) {
    },
    handleClose(item, keyPath) {
    },
  },

  created() {

  },
};
</script>

<style scoped>
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}
.brand {
  height: 60px;
  line-height: 60px;
  font-size: 24px !important;
  color: #fff !important;
  text-align: center;
}

.left_text {
  font-size: 24px !important;
  color: #fff !important;
  text-align: center;
  line-height: 50px;
}
</style>